<template>
	<view class="exchangeList">
		<!-- <view class="list flex-r-a-c" v-for="(item,index) in exchangeList" :key="index">
			<image :src="item.image" mode=""></image>
			<view class="list_f">
				<view class="name">{{item.name}}</view>
				<view class="list_f_b flex-r-b-c">
					<view class="integral">{{item.points}}<text>积分</text></view>
					<view class="btn">已兑换</view>
				</view>
			</view>
		</view> -->
		<!-- tab 切换 -->
		<view class="tab_box flex-r-a-c">
			<view class="tab_item flex-c-c-c" :class="item.tabIndex == tabCurrent ? 'active' : ''"
				v-for="(item,index) in tabList" :key="index" :data-tabCurrent="item.tabIndex"
				@tap="tabChange">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<view class="list flex-r-b-c" v-for="(item,index) in exchangeList" :key="index">
			<view class="list_l">
				<view class="name">{{item.title}}</view>
				<view class="time">{{item.create_time}}</view>
			</view>
			<view class="integralPlus"><text>{{item.integral}}</text> 积分</view>
		</view>
		
		<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold; margin-top: 30rpx; padding-bottom: 100rpx;">{{titleText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1, // 页面
				exchangeList: [], // 兑换记录列表
				titleText: '', // 上拉提示
				tabCurrent: 1,
				tabList: [{
					name: '支出',
					tabIndex: 1
				},{
					name: '收入',
					tabIndex: 2
				}]
			};
		},
		onLoad() {
			this.getExchangeList() // 获取积分历史兑换记录
		},
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				that.getExchangeList()
			}
		},
		methods:{
			// 获取积分历史兑换记录
			getExchangeList(){
				let that = this
				that.$api.integral_record({page: that.page,type: that.tabCurrent}).then(res => {
					console.log(res)
					that.titleText = res.data.data.data.length == 0 ? '已经到底了' : ''
					that.exchangeList = that.exchangeList.concat(res.data.data.data)
				})
			},
			// tab 切换
			tabChange(e){
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.page = 1
				this.exchangeList = []
				this.getExchangeList()
			}
		}
	}
</script>

<style lang="less">
	.exchangeList {
		.tab_box {
			width: 100vw;
			height: 88rpx;
			background-color: #FFFFFF;
		
			.tab_item {
				font-size: 34rpx;
				position: relative;
			}
		
			.active {
				color: #557E6F;
				position: relative;
				height: 88rpx;
		
				&::after {
					width: 134rpx;
					height: 10rpx;
					content: ' ';
					background-color: #557E6F;
					border-radius: 30rpx;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		
		.list{
			width: 90vw;
			height: auto;
			margin: 20rpx auto;
			border-bottom: 1px solid #F2F2F2;
			margin-top: 40rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 30rpx;
			.list_l{
				.name{
					color: #5A5A5A;
					font-size: 28rpx;
					font-weight: 500;
				}
				.time{
					margin-top: 10rpx;
					color: #939393;
					font-size: 20rpx;
					font-weight: 500;
				}
			}
			.integralPlus{
				color: #FF6C1D;
				font-size: 32rpx;
				text{
					display: inline-block;
					font-size: 36rpx;
					margin: 0rpx 10rpx;
				}
			}
		}
		
		
		
		
		
		// .list {
		// 	width: 90vw;
		// 	height: auto;
		// 	border-radius: 20rpx;
		// 	box-sizing: border-box;
		// 	padding: 20rpx;
		// 	background-color: #FFFFFF;
		// 	margin: 40rpx auto;

		// 	image {
		// 		width: 290rpx;
		// 		height: 180rpx;
		// 		border-radius: 20rpx;
		// 	}

		// 	.list_f {
		// 		width: 50%;

		// 		.name {
		// 			width: 100%;
		// 			color: #666666;
		// 			font-size: 800;
		// 			font-size: 32rpx;
		// 		}

		// 		.list_f_b {
		// 			margin-top: 50rpx;

		// 			.integral {
		// 				font-size: 42rpx;
		// 				color: #FF6C1D;
		// 				font-weight: 500;

		// 				text {
		// 					font-size: 24rpx;
		// 					display: inline-block;
		// 					margin-left: 10rpx;
		// 				}
		// 			}

		// 			.btn {
		// 				width: 146rpx;
		// 				height: 60rpx;
		// 				line-height: 60rpx;
		// 				text-align: center;
		// 				color: #767676;
		// 				border: 1px solid #D0D0D0;
		// 				font-size: 24rpx;
		// 				font-weight: 500;
		// 				border-radius: 40rpx;
		// 			}
		// 		}
		// 	}
		// }
	}
</style>
